<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  getPictureListAPI,
  updatePictureAPI,
  deletePictureAPI,
  batchUpdatePictureClassifyAPI,
} from '@/api/pictureAPI'
import { getSpaceByIdAPI } from '@/api/spaceAPI'
import { useClassifyStore } from '@/stores/classify'
import { useUserStore } from '@/stores/user'
import dayjs from 'dayjs'
import QRCode from 'qrcode'
import ImageCropper from '@/components/ImageCropper.vue'
import { PERMISSIONS, hasPermission } from '@/types/permission'
import formatFileSize from '@/utils/formatFileSize'

const router = useRouter()
const route = useRoute()
const classifyStore = useClassifyStore()
const userStore = useUserStore()

const userId = userStore.userInfo.id
const spaceId = route.query.spaceId
const spaceName = route.query.spaceName
const spaceType = 1 // 1-团队空间

const shareImage = ref('')
const shareDialogVisible = ref(false)
const shareCanvas = ref(null)

const spaceInfo = ref({})

const permissionList = ref([])

// 获取空间详情
const getSpaceDetail = async () => {
  const res = await getSpaceByIdAPI(spaceId)
  spaceInfo.value = res.data
  permissionList.value = res.data.permissionList
  console.log('空间详情:', res.data)
  console.log('空间详情:', permissionList.value)
}

const onShare = async (url) => {
  shareImage.value = url
  shareDialogVisible.value = true
}

const batchDialogVisible = ref(false)
const batchForm = reactive({
  spaceId: null,
  pictureIdList: [],
  classifyId: null,
  tags: [],
  nameRule: '',
})

const batchClose = () => {
  Object.assign(batchForm, {
    spaceId: null,
    pictureIdList: [],
    classifyId: null,
    tags: [],
    nameRule: '',
  })
}

// 裁剪
const imageUrl = ref('')
const cropDialogVisible = ref(false)
const copperPicture = ref(null)
const goToCrop = (picture) => {
  imageUrl.value = picture.url
  copperPicture.value = picture
  cropDialogVisible.value = true
}

const closeCropDialog = () => {
  cropDialogVisible.value = false
  copperPicture.value = null
}

const handleCropSuccess = async () => {
  cropDialogVisible.value = false
  ElMessage.success('编辑成功')
  getPictureList()
}

const goToBatchEdit = () => {
  batchForm.spaceId = spaceId
  batchForm.pictureIdList = pictures.value.map((item) => item.id)
  batchDialogVisible.value = true
}

const batchSubmit = async () => {
  await batchUpdatePictureClassifyAPI(batchForm)
  ElMessage.success('批量修改成功')
  batchDialogVisible.value = false
  getPictureList()
  Object.assign(batchForm, {
    spaceId: null,
    pictureIdList: [],
    classifyId: null,
    tags: [],
    nameRule: '',
  })
}

const generateQRCode = async () => {
  if (!shareCanvas.value) return
  try {
    QRCode.toCanvas(shareCanvas.value, shareImage.value, {
      width: 200,
      height: 200,
      margin: 2,
      color: {
        dark: '#333333',
        light: '#ffffff',
      },
    })
  } catch (err) {
    console.error('生成二维码失败：', err)
    ElMessage.error('生成二维码失败')
  }
}

const shareClose = () => {
  shareImage.value = ''
  shareDialogVisible.value = false
}

const copyShareLink = async () => {
  await navigator.clipboard.writeText(shareImage.value)
  ElMessage.success('复制成功')
}

// 团队空间特有功能
const goToSpaceAnalysis = () => {
  router.push({
    path: '/space-analysis',
    query: { spaceId: spaceId },
  })
}

const goToMemberManagement = () => {
  router.push({
    name: 'SpaceUser',
    query: { spaceId: spaceId },
  })
}

const pictures = ref([])
const searchForm = reactive({
  searchQuery: '',
  classifyId: null,
  pageNum: 1,
  pageSize: 10,
  date: [],
})

const total = ref(0)

const getPictureList = async () => {
  console.log(route.query.spaceId)

  if (!spaceId) return
  const startEditTime = searchForm.date[0]
    ? dayjs(searchForm.date[0]).format('YYYY/MM/DD HH:mm:ss')
    : null
  const endEditTime = searchForm.date[1]
    ? dayjs(searchForm.date[1]).format('YYYY/MM/DD HH:mm:ss')
    : null
  const res = await getPictureListAPI({
    ...searchForm,
    spaceId,
    startEditTime,
    endEditTime,
    spaceType: spaceType, // 传递空间类型
  })
  pictures.value = res.data.records
  total.value = res.data.total
  console.log('获取图片列表成功', pictures.value)
}

const onSearch = () => {
  searchForm.pageNum = 1
  getPictureList()
}

const onReset = () => {
  searchForm.searchQuery = ''
  searchForm.classifyId = null
  searchForm.pageNum = 1
  getPictureList()
}

const onPreview = (pictureId) => {
  router.push({
    path: '/picture_search',
    query: {
      pictureId,
    },
  })
}

// 跳转到创作图片页面
const goToCreation = (pictureId) => {
  router.push({
    path: '/picture_editor',
    query: {
      pictureId,
      spaceType: 1,
    },
  })
}

// 跳转到上传页面
const goToUpload = () => {
  router.push({
    path: '/upload',
    query: { spaceId: spaceId },
  })
}

// 编辑相关
const editDialogVisible = ref(false)
const editForm = reactive({
  id: null,
  name: '',
  introduction: '',
  classifyId: '',
  tags: [],
})

const onEdit = (row) => {
  editForm.id = row.id
  editForm.name = row.name
  editForm.introduction = row.introduction
  editForm.classifyId = row.classifyId
  editForm.tags = row.tags
  editDialogVisible.value = true
}

const onEditSave = async () => {
  await updatePictureAPI({
    id: editForm.id,
    name: editForm.name,
    introduction: editForm.introduction,
    classifyId: editForm.classifyId,
    tags: editForm.tags,
    userId: userId,
    spaceType: spaceType,
  })

  ElMessage.success('编辑成功')
  getPictureList()
  editDialogVisible.value = false
}

// 删除
const onDelete = (row) => {
  ElMessageBox.confirm('确定要删除该图片吗？', '提示', {
    type: 'warning',
  })
    .then(async () => {
      await deletePictureAPI({ id: row.id, spaceType: spaceType })
      getPictureList()
      ElMessage.success('删除成功')
    })
    .catch(() => {
      ElMessage.info('已取消删除')
    })
}

// 分页事件处理函数
const handleCurrentChange = (val) => {
  searchForm.pageNum = val
  getPictureList()
}

const handleSizeChange = (val) => {
  searchForm.pageSize = val
  searchForm.pageNum = 1
  getPictureList()
}

onMounted(() => {
  getSpaceDetail().then(() => {
    getPictureList()
    classifyStore.fetchClassifies()
  })
})
</script>

<template>
  <div class="space-detail">
    <!-- 页面标题栏 -->
    <div class="page-header">
      <h1 v-if="spaceName" class="page-title">
        {{ `${spaceName} 团队空间` }}
      </h1>
      <div class="stats-bar">
        <div class="stat-item">
          <span class="stat-label">总图片数</span>
          <span class="stat-value">{{ spaceInfo.totalCount || '未知' }}</span>
        </div>
        <div class="stat-item">
          <span class="stat-label">已用空间</span>
          <span class="stat-value">{{ formatFileSize(spaceInfo.totalSize) || '未知' }}</span>
        </div>
        <div class="stat-item">
          <span class="stat-label">最近更新</span>
          <span class="stat-value">{{
            dayjs(spaceInfo.editTime).format('YYYY-MM-DD') || '未知'
          }}</span>
        </div>
        <!-- 团队空间特有操作按钮 -->
        <div class="team-actions">
          <el-button type="primary" @click="goToSpaceAnalysis" class="analysis-btn">
            <i class="el-icon-data-analysis"></i> 空间分析
          </el-button>
          <el-button
            type="primary"
            @click="goToMemberManagement"
            class="member-btn"
            v-if="hasPermission(permissionList, PERMISSIONS.SPACE_USER_MANAGE)"
          >
            <i class="el-icon-users"></i> 成员管理
          </el-button>
        </div>
      </div>
    </div>

    <!-- 搜索和操作卡片 -->
    <div class="search-container">
      <el-form :inline="true" :model="searchForm" @submit.prevent class="search-form">
        <el-form-item label="图片名称" class="form-item">
          <el-input v-model="searchForm.searchQuery" placeholder="请输入图片关键字" clearable />
        </el-form-item>
        <el-form-item label="分类" class="form-item">
          <el-select
            v-model="searchForm.classifyId"
            placeholder="请选择图片分类"
            @change="onSearch"
          >
            <el-option label="全部" :value="null"></el-option>
            <el-option
              v-for="classify in classifyStore.classifies"
              :key="classify.id"
              :value="classify.id"
            >
              {{ classify.name }}
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="form-item">
          <el-date-picker
            v-model="searchForm.date"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="onSearch"
          />
        </el-form-item>
        <el-form-item class="form-actions">
          <el-button type="primary" @click="onSearch" class="search-btn">
            <i class="el-icon-search"></i> 查询
          </el-button>
          <el-button @click="onReset" class="reset-btn">重置</el-button>
          <el-button
            type="success"
            @click="goToUpload"
            class="add-btn"
            :disabled="!hasPermission(permissionList, PERMISSIONS.PICTURE_UPLOAD)"
          >
            <i class="el-icon-plus"></i> 添加图片
          </el-button>
          <el-button
            type="primary"
            @click="goToBatchEdit"
            class="batch-edit-btn"
            :disabled="!hasPermission(permissionList, PERMISSIONS.SPACE_USER_MANAGE)"
          >
            <i class="el-icon-edit"></i> 批量修改
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 图片画廊区域 -->
    <div class="gallery-section">
      <!-- 空状态处理 -->
      <div v-if="pictures.length === 0" class="empty-state">
        <div class="empty-icon">
          <i class="el-icon-picture-outline"></i>
        </div>
        <h3 class="empty-title">暂无图片</h3>
        <p class="empty-desc">上传图片到团队空间，开始团队素材协作管理</p>
        <el-button type="success" @click="goToUpload" class="empty-action">
          <i class="el-icon-plus"></i> 立即上传
        </el-button>
      </div>

      <!-- 图片网格 -->
      <div v-else class="gallery-grid">
        <div v-for="item in pictures" :key="item.id" class="gallery-item">
          <div class="image-container" @click="goToCrop(item)">
            <img :src="item.thumbnailUrl || item.url" :alt="item.name" class="gallery-image" />
            <div class="image-overlay">
              <div class="image-upload-date">
                {{ dayjs(item.createTime).format('YYYY-MM-DDTHH:mm:ss') }}
              </div>
              <div class="image-uploader">上传者: {{ item.user.userName || '未知' }}</div>
            </div>
          </div>
          <div class="image-info">
            <h3 class="item-title" :title="item.name">{{ item.name }}</h3>
            <div class="item-classify">
              {{ classifyStore.classifies.find((c) => c.id === item.classifyId)?.name || '未分类' }}
            </div>
            <div class="item-tags">
              <el-tag v-for="tag in item.tags" :key="tag" size="small" class="tag">
                {{ tag }}
              </el-tag>
            </div>
          </div>
          <div class="item-actions">
            <el-tooltip content="分享">
              <el-button
                icon="Share"
                @click.stop="onShare(item.url)"
                circle
                size="small"
                class="action-btn share-btn"
              />
            </el-tooltip>
            <el-tooltip content="以图搜图">
              <el-button
                icon="Search"
                @click.stop="onPreview(item.id)"
                circle
                size="small"
                class="action-btn preview-btn"
              />
            </el-tooltip>
            <el-tooltip content="编辑">
              <el-button
                icon="Edit"
                @click.stop="onEdit(item)"
                circle
                size="small"
                class="action-btn edit-btn"
                :disabled="!hasPermission(permissionList, PERMISSIONS.PICTURE_EDIT)"
              />
            </el-tooltip>
            <el-tooltip content="删除">
              <el-button
                icon="Delete"
                @click.stop="onDelete(item)"
                circle
                size="small"
                class="action-btn delete-btn"
                :disabled="!hasPermission(permissionList, PERMISSIONS.PICTURE_DELETE)"
              />
            </el-tooltip>
            <el-tooltip content="创作">
              <el-button
                icon="Picture"
                @click.stop="goToCreation(item.id)"
                circle
                size="small"
                class="action-btn create-btn"
                :disabled="!hasPermission(permissionList, PERMISSIONS.PICTURE_EDIT)"
              />
            </el-tooltip>
          </div>
        </div>
      </div>

      <!-- 分页 -->
      <div class="pagination" v-if="total > 0">
        <el-pagination
          background
          :total="total"
          :page-size="searchForm.pageSize"
          :current-page="searchForm.pageNum"
          layout="prev, pager, next"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </div>
    </div>

    <!-- 编辑弹窗 -->
    <el-dialog v-model="editDialogVisible" title="编辑图片" width="400px" class="custom-dialog">
      <el-form :model="editForm" label-width="80px" class="edit-form">
        <el-form-item label="名称" prop="name">
          <el-input v-model="editForm.name" />
        </el-form-item>
        <el-form-item label="简介" prop="introduction">
          <el-input v-model="editForm.introduction" type="textarea" rows="3" />
        </el-form-item>
        <el-form-item label="分类" prop="classifyId">
          <el-select v-model="editForm.classifyId" placeholder="请选择分类">
            <el-option
              v-for="item in classifyStore.classifies"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="标签" prop="tags">
          <el-select
            v-model="editForm.tags"
            multiple
            filterable
            allow-create
            default-first-option
            placeholder="请输入标签"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="onEditSave">保存</el-button>
      </template>
    </el-dialog>

    <!-- 分享图片的对话框 -->
    <el-dialog
      title="分享图片"
      v-model="shareDialogVisible"
      @close="shareClose"
      @open="generateQRCode"
      class="custom-dialog"
    >
      <div class="share-content">
        <h4 class="text-center">复制分享链接</h4>
        <div class="link-container">
          <span class="share-link" @click="copyShareLink">{{ shareImage }}</span>
          <el-button
            icon="CopyDocument"
            size="small"
            @click="copyShareLink"
            class="copy-btn"
          ></el-button>
        </div>
        <h4 class="text-center">扫码查看</h4>
        <div class="qr-container">
          <canvas ref="shareCanvas"></canvas>
        </div>
      </div>
    </el-dialog>

    <!-- 批量修改图片对话框 -->
    <el-dialog
      title="批量修改图片"
      v-model="batchDialogVisible"
      @close="batchClose"
      class="custom-dialog"
    >
      <el-form :model="batchForm" label-width="80px" class="batch-form">
        <el-form-item label="分类">
          <el-select v-model="batchForm.classifyId" placeholder="请选择分类">
            <el-option
              v-for="item in classifyStore.classifies"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="标签">
          <el-select
            v-model="batchForm.tags"
            multiple
            filterable
            allow-create
            default-first-option
            placeholder="请输入标签"
          />
        </el-form-item>
        <el-form-item label="命名规则">
          <el-input
            v-model="batchForm.nameRule"
            placeholder="请输入命名规则，输入（序号）可动态生成"
          />
          <div class="rule-example">例如：产品图（序号） 将生成 产品图1、产品图2...</div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="batchSubmit">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 图片裁剪编辑框 -->
    <el-dialog
      title="图片裁剪"
      v-model="cropDialogVisible"
      width="800px"
      @close="closeCropDialog"
      class="custom-dialog"
    >
      <ImageCropper
        :imageUrl="imageUrl"
        :picture="copperPicture"
        :space-id="spaceId"
        :space-type="spaceType"
        @crop-success="handleCropSuccess"
      />
    </el-dialog>
  </div>
</template>

<style scoped>
/* 基础样式 - 隐藏滚动条但保留功能 */
.space-detail {
  padding: 24px;
  background: #f8fafc;
  min-height: 100vh;
  font-family: 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}

.space-detail::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

/* 页面标题和统计 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 16px;
}

.page-title {
  font-size: 22px;
  font-weight: 600;
  color: #1e293b;
  margin: 0;
}

.stats-bar {
  display: flex;
  align-items: center;
  gap: 20px;
}

.stat-item {
  text-align: center;
}

.stat-label {
  display: block;
  font-size: 13px;
  color: #64748b;
  margin-bottom: 2px;
}

.stat-value {
  font-size: 16px;
  font-weight: 600;
  color: #2563eb;
}

/* 团队空间特有按钮样式 */
.team-actions {
  display: flex;
  gap: 10px;
  margin-left: 20px;
  padding-left: 20px;
  border-left: 1px solid #e2e8f0;
}

.analysis-btn {
  background-color: #3b82f6;
  border-color: #3b82f6;
}

.analysis-btn:hover {
  background-color: #2563eb;
  border-color: #2563eb;
}

.member-btn {
  background-color: #8b5cf6;
  border-color: #8b5cf6;
}

.member-btn:hover {
  background-color: #7c3aed;
  border-color: #7c3aed;
}

/* 搜索区域 */
.search-container {
  background: white;
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  border: 1px solid #f1f5f9;
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.form-item {
  margin-bottom: 0;
}

.form-actions {
  margin-bottom: 0;
  margin-left: auto;
  display: flex;
  gap: 8px;
}

.search-btn,
.reset-btn,
.add-btn,
.batch-edit-btn {
  transition: all 0.2s ease;
}

.add-btn {
  background-color: #10b981;
  border-color: #10b981;
}

.add-btn:hover {
  background-color: #059669;
  border-color: #059669;
}

/* 画廊区域 */
.gallery-section {
  margin-top: 8px;
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 50px 20px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  border: 1px solid #f1f5f9;
}

.empty-icon {
  font-size: 56px;
  color: #94a3b8;
  margin-bottom: 16px;
}

.empty-title {
  font-size: 16px;
  font-weight: 500;
  color: #334155;
  margin-bottom: 6px;
}

.empty-desc {
  color: #64748b;
  margin-bottom: 20px;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.empty-action {
  background-color: #2563eb;
  border-color: #2563eb;
}

/* 图片网格 */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}

.gallery-item {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  border: 1px solid #f1f5f9;
}

.gallery-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
}

.image-container {
  height: 160px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}

.gallery-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.gallery-item:hover .gallery-image {
  transform: scale(1.05);
}

.image-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
  padding: 10px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.gallery-item:hover .image-overlay {
  opacity: 1;
}

.image-upload-date {
  color: white;
  font-size: 12px;
  margin-bottom: 4px;
}

.image-uploader {
  color: rgba(255, 255, 255, 0.9);
  font-size: 11px;
}

.image-info {
  padding: 14px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.item-title {
  font-size: 15px;
  font-weight: 500;
  margin: 0 0 6px 0;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item-classify {
  font-size: 12px;
  color: #64748b;
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
}

.item-classify::before {
  content: '•';
  font-size: 8px;
  margin-right: 4px;
  color: #94a3b8;
}

.item-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: auto;
}

.tag {
  font-size: 12px;
  background-color: #eff6ff;
  color: #2563eb;
  border-color: #dbeafe;
}

/* 操作按钮 */
.item-actions {
  display: flex;
  justify-content: center;
  padding: 10px;
  background-color: #fafbfc;
  border-top: 1px solid #f1f5f9;
  gap: 6px;
}

.action-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
  border: 1px solid #e2e8f0;
  color: #64748b;
  transition: all 0.2s ease;
}

.action-btn:hover {
  transform: translateY(-2px);
  border-color: transparent;
}

.share-btn:hover {
  background-color: #3b82f6;
  color: white;
}

.preview-btn:hover {
  background-color: #10b981;
  color: white;
}

.edit-btn:hover {
  background-color: #f59e0b;
  color: white;
}

.delete-btn:hover {
  background-color: #ef4444;
  color: white;
}

.create-btn:hover {
  background-color: #8b5cf6;
  color: white;
}

/* 分页 */
.pagination {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  padding: 10px;
}

/* 弹窗样式 */
.custom-dialog {
  border-radius: 8px;
  overflow: hidden;
}

.edit-form,
.batch-form {
  margin-top: 10px;
}

/* 分享弹窗 */
.share-content {
  padding: 10px;
}

.link-container {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 10px;
  background-color: #f8fafc;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
}

.share-link {
  flex: 1;
  font-size: 13px;
  color: #3b82f6;
  word-break: break-all;
  cursor: pointer;
  transition: color 0.2s;
}

.share-link:hover {
  color: #1d4ed8;
}

.copy-btn {
  color: #64748b;
}

.qr-container {
  display: flex;
  justify-content: center;
  margin: 8px 0;
}

/* 批量修改提示 */
.rule-example {
  font-size: 12px;
  color: #94a3b8;
  margin-top: 4px;
}

/* 响应式调整 */
@media (max-width: 992px) {
  .stats-bar {
    gap: 14px;
    flex-wrap: wrap;
  }

  .team-actions {
    margin-left: 0;
    padding-left: 0;
    border-left: none;
    margin-top: 10px;
    width: 100%;
    justify-content: flex-end;
  }

  .form-actions {
    margin-left: 0;
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .stats-bar {
    width: 100%;
    justify-content: space-between;
  }

  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
  }

  .form-item {
    width: 100%;
  }
}
</style>
